<template>
	<view class="container">
		<!-- 状态栏 -->
		<view :class="statusBarViewClass"></view>
		<!-- 导航栏 -->
		<view class="customer-nav-view nav-sticky">
			<view class="customer-nav-left">
				<uni-icons type="back" color='#000000' size="24" @click="goBackPage"></uni-icons>
			</view>
			<view class="customer-nav-title">
				更换邮箱
			</view>
			<view class="customer-nav-right">
			</view>
		</view>

		<!-- 账号 -->
		<view class="input-group">
			<view class="group-label">账号</view>
			<input v-model="form.account" class="group-input disable" type="text" :disabled="userInfo_dis"
				placeholder="请输入账号 6-20位" />
		</view>
		<!-- 邮箱 -->
		<view class="input-group">
			<view class="group-label">邮箱</view>
			<input v-model="form.email_old" class="group-input disable" type="text" :disabled="userInfo_dis"
				placeholder="请输入邮箱" />
		</view>
		<!-- 邮箱 -->
		<view class="input-group">
			<view class="group-label">新邮箱</view>
			<input v-model="form.email" class="group-input" type="text" placeholder="请输入新的邮箱" />
		</view>
		<!-- 验证码 -->
		<view class="input-group">
			<view class="group-label">验证码</view>
			<input v-model="form.code" class="group-input" type="text" placeholder="邮箱验证码" maxlength="6" />
			<view class="input-icon">
				<text class="send-code-bt" @click="getEmailCode" v-if="email_tip_status">获取验证码</text>
				<uni-countdown v-else color="#FFFFFF" background-color="#ff0000" border-color="#ff0000" :showDay="false"
					:showHour="false" :showMinute="false" :second="60" @timeup="resetEmailStatus"></uni-countdown>

			</view>
		</view>

		<!-- 确认重置 -->
		<button class="reset-btn" @click="changeEmail">确认更换</button>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onReady
	} from '@dcloudio/uni-app'
	import api from '@/config/api'
	import request from '@/utils/request'
	import {
		showToast,
		getUserInfo,
		getUserToken,
		clearUserInfo
	} from '@/utils/utils';

	const statusBarViewClass = ref("status-bar-view-2")
	const userInfo = ref(getUserInfo())
	const userInfo_dis = ref(getUserInfo() ? true : false)

	// ref
	const email_tip_status = ref(true)

	// 表单数据
	const form = ref({
		account: userInfo.value ? userInfo.value.account : '',
		email_old: userInfo.value ? userInfo.value.email : '',
		email: '',
		code: ''
	});


	onReady(() => {})


	// 恢复获取验证码状态
	const resetEmailStatus = () => {
		email_tip_status.value = true
	}

	// 获取验证码
	const getEmailCode = () => {
		if (!form.value.email || form.value.email.trim() == "") {
			showToast('请输入邮箱')
			return
		}
		form.value.email = form.value.email.trim()
		// 校验邮箱格式
		if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(form.value.email)) {
			showToast('邮箱格式错误')
			return;
		}
		if (form.value.email === form.value.email_old) {
			showToast('请输入新的邮箱地址')
			return;
		}
		email_tip_status.value = false

		request.post(api.host + api.getEmailCodeUrl, {
			email: form.value.email,
			subjectCode: 'change_email'
		}).then(result => {
			showToast(result.msg)
		}).catch(() => {
			resetEmailStatus()
		})
	}

	// 更换邮箱
	const changeEmail = () => {
		// 校验输入
		if (!form.value.account ||
			!form.value.email || !form.value.code) {
			showToast('信息填写不完整')
			return;
		}
		if (form.value.account.trim() == "" || form.value.email.trim() == "" || form.value.code.trim() == "") {
			showToast('信息填写不完整')
			return;
		}
		if (form.value.email === form.value.email_old) {
			showToast('请输入新的邮箱地址')
			return;
		}
		// 校验邮箱格式
		if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(form.value.email)) {
			showToast('邮箱格式错误')
			return;
		}

		uni.showLoading({
			title: '正在更换邮箱...',
			mask: true
		});

		request.post(api.host + api.changeEmaildUrl, {
			token: getUserToken(),
			account: form.value.account,
			email: form.value.email,
			code: form.value.code,
		}).then(result => {
			uni.hideLoading()
			showToast(result.msg)
			clearUserInfo()
			uni.reLaunch({
				url: '/pages/index/index'
			})
		}).catch(() => {
			uni.hideLoading()
		})
	};

	// 返回
	const goBackPage = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	@import url("reset_password.css");
</style>